<template>
    <div class="">

        <h1>微信js-sdk</h1>
        <button @click="selectPhotos">选择图片</button>
        <hr>
        <h2>实现功能: 录音,并且把录音转换为文字输出:</h2>
        <button @click="startRec">录音开始</button>
        <button @click="stopRec">录音结束</button>
        <p>录音转换结果: {{recText}}</p>
        <h2>设置分享给朋友</h2>
        <button @click="messageShareData">设置分享</button>
        <ul>
            <li style="text-align:center;" v-for="img in imgs" :key="img">
                <img style="width:200px;height:200px;" :src="img" alt="">
            </li>
        </ul>
        
    </div>
</template>

<script>
import axios from 'axios';
// 项目的appId
var appid = 'wxb10344d6be4e46ee';
// 接口服务器地址: 
const serveHost = 'http://www.bufantec.com';
export default {
    components: {

    },
    data() {
        return {
            imgs: [],
            recText: ''
        };
    },
    computed: {

    },
    created() {
        //    1. 初始化微信配置
        this.initWxConfig();
       
    },
    mounted() {

    },
    methods: {
        initWxConfig(){
            //  1. 初始化配置
            //  文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
            // 1.1  签名需要依赖于后台生成,所以先要发送请求去后台获取签名信息
            //  获取签名api:  /wx/user/getAccessToken?appId=xxx   
            var api = `${serveHost}/wx/user/getAccessToken?appId=${appid}`;
            axios.get(api)
                .then(res=>{
                    // 关键点!!!!
                    console.log(res);
                    // var resConfig = res.data; 
                    // 对象解构写法
                    var {appId,timestamp,noncestr,signature} = res.data;
                    wx.config({
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId, // 必填，公众号的唯一标识
                        timestamp, // 必填，生成签名的时间戳
                        nonceStr:noncestr, // 必填，生成签名的随机串
                        signature,// 必填，签名
                        jsApiList: ['chooseImage','startRecord','stopRecord','translateVoice','updateAppMessageShareData'] // 必填，需要使用的JS接口列表
                    });
                     // 一进来静默方式 改变分享内容
                    this.messageShareData();
                })
            
        },
        selectPhotos(){
            var that = this;
            wx.chooseImage({
                count: 9, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    that.imgs = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                }
            });
        },
        startRec(){
            // 先清空文本
            this.recText = '...';
            wx.startRecord();
        },
        stopRec(){
            var that = this;
            wx.stopRecord({
            success: function (res) {
                    // 录音文件
                    var localId = res.localId;
                    wx.translateVoice({
                        localId, // 需要识别的音频的本地Id，由录音相关接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            that.recText = res.translateResult;// 语音识别的结果
                        }
                    });
                }
            });
        },
        // 分享
        messageShareData(){
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({ 
                    title: '分享测试', // 分享标题
                    desc: '2005jssdk分享功能测试', // 分享描述
                    link: 'http://bufantec.natapp1.cc', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'http://bufantec.com/pages/tec/static/img/bd_logo.png', // 分享图标
                    success: function () {
                        alert('设置成功!');
                    }
                })

            })
            
        }

    },
};
</script>

<style scoped lang="scss">

</style>
